<template>
  <div class="__form" v-if="refreshFlag > 0">
    <div class="flex-start m-b-30">
      <el-button
        icon="el-icon-back"
        type="primary"
        plain
        round
        size="small"
        @click="back"
        >返回</el-button
      >
    </div>
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="160px">
      <el-form-item label="车牌号" prop="carNo">
        <el-input v-model="form.carNo" size="large" />
      </el-form-item>
      <el-form-item label="常驻位置" prop="address">
        <el-input v-model="form.address" size="large" type="textarea" />
      </el-form-item>
      <el-form-item class="m-t-10">
        <el-button @click="cancel" icon="el-icon-close">取消</el-button>
        <el-button
          type="primary"
          @click="save"
          :loading="saveLoading"
          icon="el-icon-check"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import AppAddress from "@/components/business/app-address";
import {
  getRecords,
  isNotNull,
  isTrue,
  isNull,
  isStringEmpty,
  listNotEmpty,
  msgError,
  msgSuccess,
  getRespData,
} from "@/util/common-util";
import AppFileUpload from "@/components/business/app-file-upload";
import MapSelectLocationContent from "@/components/business/map-select-location-content";
import { submit } from "@/api/business/filling-storage-car";
import SelectFillingOperationUserButton from "@/components/business/select-filling-opreation-user-button";
import { deepClone } from "@/util/util";
import { getRefImgs } from "@/api/business/attachment-file";
import { getRegionDetail } from "@/api/business/region";

export default {
  name: "rehydration-vehicle-create-content",
  components: {
    SelectFillingOperationUserButton,
    MapSelectLocationContent,
    AppFileUpload,
    AppAddress,
  },
  props: {
    info: Object,
  },
  data() {
    return {
      refreshFlag: 1,
      saveLoading: false,
      isEdit: false,
      showSelectLocationFlag: false,
      initAddress: null,
      form: {
        carNo: "",
        carAge: 0,
        carLng: "",
        carLat: "",
        vinCode: "",
        productTime: "",
        userId: "",
        userName: "",
        userPhone: "",
        capacity: 0,
        provinceCode: "",
        cityCode: "",
        districtCode: "",
        attachmentIds: [],
        address: "",
      },
      initAttachmentImgs: [],
      rules: {
        carNo: [{ required: true, message: "请填写车牌号", trigger: "blur" }],
        vinCode: [{ required: true, message: "填写VIN码", trigger: "blur" }],
        productTime: [
          { required: true, message: "请选择生产日期", trigger: "change" },
        ],
        userName: [
          { required: true, message: "请选择司机", trigger: "change" },
        ],
        districtCode: [
          { required: true, message: "请选择加注站地址", trigger: "change" },
        ],
        address: [
          { required: true, message: "请填写详细地址", trigger: "blur" },
        ],
        capacity: [
          { required: true, message: "请填写储罐容量", trigger: "blur" },
        ],
      },
    };
  },
  async mounted() {
    if (isNotNull(this.info)) {
      this.isEdit = true;
      this.form.carNo = this.info.carNo;
      this.form.address = this.info.address;
    }
  },
  methods: {
    back(flag) {
      this.$emit("back", flag);
    },
    cancel() {
      this.back();
    },
    save() {
      if (isTrue(this.isEdit)) this.form.id = this.info.id;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.saveLoading = true;
          // todo tons
          const f = deepClone(this.form);
          f.capacity = f.capacity * 1000;
          submit(f)
            .then((res) => {
              msgSuccess();
              this.saveLoading = false;
              this.back(true);
            })
            .catch(() => {
              this.saveLoading = false;
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.__form {
  width: 600px;
}
</style>
